<template>
  <div>
    <h1>自定义组件的v-model</h1>

    <section>
      <BaseInput v-model="message" />
      <BaseInput :value="message" @input="message = $event" />
      <span> {{ message }}</span>
    </section>

    <section>
      <BaseCheckbox v-model="checked" />
      <BaseCheckbox :checked="checked" @change="checked = $event" />
      <span> {{ checked }}</span>
    </section>
  </div>
</template>

<script>
import BaseInput from '@/components/06vmodel/BaseInput'
import BaseCheckbox from '@/components/06vmodel/BaseCheckbox'
export default {
  components: {
    BaseInput,
    BaseCheckbox
  },
  data() {
    return {
      message: '最新消息',
      checked: true
    }
  }
}
</script>

<style lang="scss" scoped>
div {
  section {
    margin: 6px auto;
  }
}
</style>